<template>
    <!-- 搜索框 -->
  <van-search
    v-model="searchKey"
    placeholder="全站搜索"
    shape="round"
    class="search-box"
    @search="onSearch"    
  />
   <!-- 服务类型导航 -->
  <van-tabs
    v-if="!isSearching" 
    v-model:active="activeTab" 
    swipeable
    class="type-tabs"
    @click-tab="sendServiceTypeName"
  >
    <van-tab 
      v-for="item in findAllTypeList"
      :key="item.categoryId"
      :title="item.categoryName"
    >
    </van-tab>
  </van-tabs>
  <ContentTest :isSearching="isSearching"/>
</template>

<script setup name="NavTest">
import { ref, onMounted } from 'vue'
import { getFindAllTypes } from '../api'
import { emitter } from '@/utils/eventBus'
import {useRouter} from 'vue-router';
import service from '../utils/request';
import ContentTest from '../pages/ContentTest.vue'
const active = ref(0);
const router = useRouter();
const findAllTypeList = ref([]);
const activeTab = "1";
onMounted(() => {
  getList();
  emitter.on('service-type-change', ({ categoryId }) => {
    loadContent(categoryId)
  });
});

const searchKey = ref('');

//获取服务分类类型列表
const getList = async () => {
  try{
    let ret = await getFindAllTypes();
    findAllTypeList.value = ret;
  }catch(e){
    console.log("e", e);
  }
};
function sendServiceTypeName(name) {
  emitter.emit("service-type-name", {
    // serviceType: findAllTypeList.value,
    serviceType: name.title
  });
  // 新增：发送重置侧边栏事件
  emitter.emit("reset-sidebar-active");
  // console.log("name", name);
}

const isSearching = ref(false)
// 搜索事件处理
const onSearch = (value) => {
  isSearching.value = true
  emitter.emit("search-keyword", {
    serviceName: value
  });
};

</script>

<style lang='less' scoped>
::v-deep(.type-tabs) {
  // 修改 tab 标签的样式
  .van-tabs__wrap {
    background-color: transparent;
  }

  .van-tab {
    color: white; // 未激活文字颜色
    background-color: #1989fa; // 蓝色背景
    margin: 5px;
    border-radius: 4px;
  }

  .van-tab--active {
    color: white; // 激活文字颜色
    background-color: #1989fa; // 激活背景颜色
    font-weight: bold;
  }

  // 修改滑块指示器为透明（可选）
  .van-tabs__line {
    background-color: transparent;
  }
}
:deep(.van-tab) {
  color: white;
  background-color: #1989fa;
}
</style>